<!-- 电表详情 -->
<template>
    <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from "echarts"
import {Utility} from "@/libs/utility"
export default {
    name: "monthEcharts",
    components: {},
    props: ["dir"],
    data() {
        return {
            myChart: null,
            xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
            yData: [23, 24, 18, 25, 27, 28, 25], //数据
            myChartStyle: {float: "left", width: "100%", height: "280px"} //图表样式
        }
    },
    computed: {
        cDir() {
            return this.dir
        }
    },
    watch: {
        cDir(newVal) {
            console.log(newVal)
            this.myChart.resize()
        }
    },
    created() {},
    mounted() {
        this.getMonth()
        this.initEcharts()
    },
    methods: {
        getMonth() {
            const days = Utility.getCurrentMonthDay()
            let xData = []
            let yData = []
            for (let index = 1; index <= days; index++) {
                xData.push(index + "日")
                yData.push(parseInt(index * Math.random() * 10000))
            }
            this.xData = xData
            this.yData = yData
            console.log(days)
        },
        initEcharts() {
            // 基本柱状图
            const option = {
                title: {
                    text: "",
                    subtext: "                  kWh"
                },
                xAxis: {
                    data: this.xData
                },
                yAxis: {},
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    },
                    formatter: function (params) {
                        var tar = params[0]
                        return tar.name + " : " + tar.value + "kWh"
                        // return tar.name + "<br/>" + tar.seriesName + " : " + tar.value
                    }
                },
                series: [
                    {
                        type: "bar", //形状为柱状图
                        data: this.yData,
                        itemStyle: {
                            color: "#2680FB"
                        }
                    }
                ]
            }
            const myChart = echarts.init(document.getElementById("mychart"))
            myChart.setOption(option)
            this.myChart = myChart
        }
    }
}
</script>

<style scoped></style>
